<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>模板语法</title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div>
			计算属性这么调用:	{{fullName2}}
			<br/>	
			方法这么调用:{{fullName1()}}
				{{age}}
			<br/>	
			侦听器调用:
			{{fullName}}
			</div>
		</div>
	</body>
	<script>
		 
		var app=new Vue({
			el:'#app',
			data:{
				firstName:'Dell',
				lastName:'Lee',
				fullName:'Dell Lee ',
				age:28
			},
			methods:{
				fullName1 : function(){
					return this.firstName+' '+this.lastName;
				}
			},
			 /* 计算属性 */
			computed:{
				fullName2:function(){
					console.log('计算了一次 computed');
					return this.firstName+' '+this.lastName
				}
			},
			/* 侦听器 */
			watch:{
				firstName:function(){
					console.log('计算了一次 watch  firstName');
					this.fullName=this.firstName+' '+this.lastName;
				},
				lastName:function(){
					console.log('计算了一次 watch  lastName');
					this.fullName=this.firstName+' '+this.lastName;
				}
			}

			
		})
 	</script>
</html>